<template>
	<view class="page">
		<!-- 	<view class="member-center" :style="{
			  backgroundImage: `url('${backgroundImage1}')`,
			  backgroundSize: '100% 100%',
			  height:'400rpx'
			}">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>
		</view> -->
		<view class="member-center">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#333" size="20"></up-icon>
			</view>
			<view class="fontSize-32 color-333 header-text">
				充值记录
			</view>
		</view>
		<view class="padding-40 box-sizing">
			<view class="flex items-center marginTop-30">
				<view class="select" :class="current==0?'hover':''" @click="tabClick(0)">
					全部
				</view>
				<view class="select text-right" :class="current==2?'hover':''" @click="tabClick(2)">
					审核中
				</view>
				<view class="select" :class="current==1?'hover':''" @click="tabClick(1)">
					成功
				</view>
				<view class="select" :class="current==3?'hover':''" @click="tabClick(3)">
					失败
				</view>
			</view>

			<view class="width-full box-sizing borderRadius-30 marginTop-20"
				style="background-color: #FAFAFA; padding: 0 30rpx;overflow: hidden;" v-for="(item,index) in totalList"
				:key="index" v-if="totalList.lenght>0">
				<view class="flex space-between  marginTop-20 marginBottom-10">
					<view class="fontSize-32 color-333 weight-700">
						{{item.month}}
					</view>
					<view class="flex items-center">
						<view class="fontSize-28 color-999">
							充值成功：¥{{item.total_amount}}
						</view>
					</view>
				</view>
				<view class="flex space-between items-center box-sizing border_EB" style="padding: 30rpx 0;"
					v-for="(i,v) in totalList[index].list" :key="v" @click="goDetail(i.pay_id)">
					<view class="flex items-center">
						<image src="../../static/add.png" mode="" class="width-80 height-80 marginRight-16"></image>
						<view class="">
							<view class="fontSize-28 color-333 weight-700">
								+{{i.amount}}
							</view>
							<view class="fontSize-26 color-999 marginTop-10">
								{{i.remark}}
							</view>
						</view>

					</view>
					<view class="">
						<view class="fontSize-26 text-right" :style="i.status==1?'color: #51D580;':i.status==2?'color: #FF8833;':'color:#DF2828'">
							{{i.status_name}}
						</view>
						<view class="fontSize-24 color-999 marginTop-10">
							{{i.pay_time}}
						</view>
					</view>
		
				</view>



			</view>
			<view class="" v-else>
				<image src="../../static/Frame.png" mode="" class="no_data_img"></image>
				<view class="no_data_title">
					暂无相关记录
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	const rechargelistApi = inject('rechargelist');
	const isOpen = ref(true)
	const status = ref('')
	const totalList = ref([])
	const current=ref(0)
	//全部传空  2-待审核  1-通过 3-失败 
	onLoad(() => {
	getList()
	});
	const getList = () => {
		rechargelistApi({
			status: current.value
		}).then(res => {
			console.log(res)
			totalList.value = res
		})
	}
	const back = () => {
		uni.navigateBack()
	}
const goDetail = (id) => {
		uni.navigateTo({
			url:'/pagesA/my/rechargeRecordDetail?id='+id
		})
	}
	const toMoney = () => {
		uni.navigateTo({
			url: '/pagesA/my/spreadBalance'
		})
	}
	const tabClick = (e) => {
		current.value = e
		getList()
	}
	
</script>
<style lang="scss" scoped>
	.member-center {
		width: 100%;
		height: 216rpx;
		background-color: #D4FDE2;
		padding-left: 32rpx;
		padding-right: 72px;
		box-sizing: border-box;
		position: relative;
		;
	}

	

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
	}

	.content {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -50rpx;
		z-index: 99;
	}

	.select {
		width: 144rpx;
		height: 72rpx;
		border-radius: 90rpx 90rpx 90rpx 90rpx;
		border: 2rpx solid #CCCCCC;
		margin-right: 20rpx;
		text-align: center;
		line-height: 72rpx;
		color: #CCCCCC;
	}
	.border_EB{
		border-bottom: 1rpx solid #EBEBEB;
	}
	.hover {
		width: 144rpx;
		height: 72rpx;
		background: #D4FDE2;
		border-radius: 90rpx 90rpx 90rpx 90rpx;
		border: none;
		margin-right: 20rpx;
		text-align: center;
		line-height: 72rpx;
		color: #2BC361;
	}
	.no_data_img{
		width: 160rpx;
		height: 160rpx;
		margin: 230rpx auto 40rpx;
		display: block;
	}
	.no_data_title{
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>